<template>
<view>
<!-- 团队信息开始 -->
<view class="container">
<view class="team_info">
  <view class="team_tab clearfix">
    <view :class="'team_tab_list ' + (currentTab==1?'active':'')" data-current="1" @tap="clickTab">一级（{{one}}）</view>
    <view :class="'team_tab_list ' + (currentTab==2?'active':'')" data-current="2" @tap="clickTab">二级（{{two}}）</view>
    <view :class="'team_tab_list ' + (currentTab==3?'active':'')" data-current="3" @tap="clickTab">三级（{{three}}）</view>
  </view>
  <view class="prompt">
    <image src="/static/images/distribut/crown@2x.png"></image>
    皇冠标志表示该用户为高级会员
  </view>
  <view class="team_details">
  <block v-for="(item, index) in teamList.lists" :key="index" :item="item">

    <view class="team_details_list wrap" v-if="item.user_level.type == 1">
      <image :src="item.head_pic" class="header_image"></image>
      <view class="user_info">
        <view class="user_name">{{item.nickname}}<image src="/static/images/distribut/crown@2x.png"></image></view>
        <view class="join_time">加入时间：{{item.reg_time}}</view>
      </view>
      <view class="user_data">
        <view class="consume"><text>获佣: + {{item.distribut_money}}</text></view>
        <view class="number">{{item.user_type_data}} 位成员</view>
      </view>
    </view>
  
    <view class="team_details_list wrap" v-else>
      <image :src="item.head_pic" class="header_image"></image>
      <view class="user_info">
        <view class="user_name">{{item.nickname}}<image src="/static/pages/images/distribut/team_header3@2x.png"></image></view>
        <view class="join_time">加入时间：{{item.reg_time}}</view>
      </view>
      <view class="user_data">
        <view class="consume">消费：<text>￥{{item.user_order.total_amount}}</text></view>
        <view class="consume">献佣：<text>￥{{item.user_order.commission}}</text></view>
        <view class="number">{{item.user_order.count}}笔订单</view>
      </view>
    </view>

  </block>
  </view>
  
</view>
</view>
<!-- 团队信息结束 -->


<!-- 底部菜单 -->
<!--<import src="../../index/publics/publics.wxml"></import>-->
<block data-type="template" data-is="distributMenu" data-attr="page:page">
<!-- 底部菜单 -->
<view class="pos_fixed">
    <!-- 我的分销底部导航 -->
    <view class="tpd-footer tpd-footer1">
        <view hover-class="none" @tap.stop="distributTopages" data-idx="0" :class="page == 0?'tpd-footer-select':''"><image :src="page == 0?'/images/distribut/seller_red@2x.png':'/images/distribut/seller_black@2x.png'"></image><text>分销中心</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="1" :class="page == 1?'tpd-footer-select':''"><image style="width:59rpx;" :src="page == 1?'/images/distribut/team_red@2x.png':'/images/distribut/team_black@2x.png'"></image><text>我的团队</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="2" :class="page == 2?'tpd-footer-select':''"><image :src="page == 2?'/images/distribut/money_red@2x.png':'/images/distribut/money_black@2x.png'"></image><text>我的账户</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="3" :class="page == 3?'tpd-footer-select':''"><image :src="page == 3?'/images/distribut/order_red@2x.png':'/images/distribut/order_black@2x.png'"></image><text>分销订单</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="4" :class="page == 4?'tpd-footer-select':''"><image :src="page == 4?'/images/distribut/shop_red@2x.png':'/images/distribut/shop_black@2x.png'"></image><text>我的网店</text></view>
    </view>
  </view>
</block>
</view>
</template>

<script>
//index.js
var app = getApp();
var request = app.globalData.request;
var setting = app.globalData.setting;
var common = require("../../../utils/common.js");
var util = require("../../../utils/util.js");
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      currentTab: 1,
      page: 1,
      one: 0,
      two: 0,
      three: 0,
      currentPage: 1,
      teamList: null
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    load.init(this, 'lists', 'teamList');
    this.getTeamList(this.currentTab);
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.getTeamList(this.currentTab);
    }
  },
  onPullDownRefresh: function (e) {
    this.resetData();
    this.getTeamList(this.currentTab);
  },
  methods: {
    getTeamList: function (level) {
      var that = this;
      load.request('/api/Distribut/lower_list/level/' + level + '?p=' + that.currentPage, function (res) {
        that.currentPage++;
        that.setData({
          one: res.data.result.fcount,
          two: res.data.result.scount,
          three: res.data.result.tcount
        });

        if (res.data.result.lists) {
          res.data.result.lists.forEach(function (val, index, arr) {
            val.reg_time = util.format(val.reg_time, 'yyyy-M-d');
            val.head_pic = common.getFullUrl(val.head_pic);
          });
        }
      });
    },
    //事件处理函数
    clickTab: function (e) {
      var that = this;

      if (that.currentTab != e.target.dataset.current) {
        that.setData({
          currentTab: e.target.dataset.current
        });
        that.resetData();
        that.getTeamList(e.target.dataset.current);
      }
    },
    distributTopages: function (e) {
      common.todistribut(e.currentTarget.dataset.idx, this.page);
    },
    //重置数据
    resetData: function () {
      load.resetConfig();
      this.teamList = null;
      this.currentPage = 1;
    }
  }
};
</script>
<style>
.clearfix:after{
  content: '.';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  clear: both;
}
.wrap {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box
}
page {
  background-color: #f5f5f5;
}
.show {
  display: block;
}
.hidden {
  display: none;
}
.team_info .team_tab .team_tab_list {
  float: left;
  height: 88rpx;
  font-size: 30rpx;
  color: #666;
  line-height: 88rpx;
  text-align: center;
  width: 33.3333%;
  box-sizing: border-box;
  background: #fff;
}
.team_info .team_tab .team_tab_list.active {
  color: #2E2E2E;
  font-weight: bold;
}
.team_info .prompt {
  height: 70rpx;
  padding-left: 96rpx;
  font-size: 24rpx;
  color: #666;
  line-height: 70rpx;
  background-color: #f9f2d8;
  overflow: hidden;
  position: relative;
}
.team_info .prompt image {
  position: absolute;
  left: 54rpx;
  top: 0;
  width: 26rpx;
  height: 24rpx;
  margin-top: 20rpx
}
.team_info .team_details .team_details_list{
  height: 140rpx;
  padding-top: 30rpx;
  padding-bottom: 25rpx;
  width: 710rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
  background: #fff;
}
.team_info .team_details .team_details_list .header_image {
  float: left;
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;
}
.team_info .team_details .team_details_list .user_info {
  float: left;
  margin-left: 30rpx;
}
.team_info .team_details .team_details_list .user_info .user_name {
  display: block;
  color: #1a1a1a;
  font-size: 28rpx;
  height: 38rpx;
  position: relative;
}
.team_info .team_details .team_details_list .user_info .user_name image {
  position: absolute;
  height: 26rpx;
  width: 24rpx;
  margin-left: 8rpx;
  margin-top: 7rpx
}
.team_info .team_details .team_details_list .user_info .join_time {
  margin-top: 5rpx;
  color: #666;
  font-size: 22rpx;
}
.team_info .team_details .team_details_list .user_data {
  float: right;
}
.team_info .team_details .team_details_list .user_data .consume {
  color: #1a1a1a;
  font-size: 24rpx;
}
.team_info .team_details .team_details_list .user_data .consume text {
  font-weight: bold;
  color: #ff6a00;
}
.team_info .team_details .team_details_list .user_data .number {
  display: block;
  color: #666;
  font-size: 22rpx;
  margin-top: 10rpx;
  text-align: right;
}
</style>